<template>
  <div class="school-home">
    <!-- 数据统计 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-icon">
            <el-icon><User /></el-icon>
          </div>
          <div class="stat-data">
            <p class="stat-title">今日签到</p>
            <p class="stat-value">{{ todayCheckin }}</p>
            <p class="stat-rate">{{ checkinRate }}% 出勤率</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-icon">
            <el-icon><Notebook /></el-icon>  <!-- 修改为新的Book图标名 -->
          </div>
          <div class="stat-data">
            <p class="stat-title">本周课程</p>
            <p class="stat-value">{{ weekCourses }}</p>
            <p class="stat-rate">{{ completedCourses }} 节已完成</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="stat-card">
          <div class="stat-icon">
            <el-icon><ChatDotRound /></el-icon>  <!-- 修改为新的Message图标名 -->
          </div>
          <div class="stat-data">
            <p class="stat-title">待处理消息</p>
            <p class="stat-value">{{ pendingMessages }}</p>
            <p class="stat-rate">含 {{ urgentMessages }} 条紧急</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最近通知 -->
    <el-card class="notices-card">
      <template #header>
        <span>最近通知</span>
        <el-button size="small" type="text">查看全部</el-button>
      </template>
      <el-timeline>
        <el-timeline-item 
          v-for="(notice, index) in recentNotices" 
          :key="index"
          :timestamp="notice.time"
        >
          <el-card>
            <h4>{{ notice.title }}</h4>
            <p>{{ notice.content }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {
  School,
  User,
  Notebook,  // 替代原来的Book
  ChatDotRound,  // 替代原来的Message
} from '@element-plus/icons-vue';

// 学校基本信息
const schoolName = ref('阳光第一小学');
const schoolRegion = ref('江苏省南京市玄武区');
const teacherCount = ref(86);
const studentCount = ref(1253);

// 统计数据
const todayCheckin = ref(1189);
const checkinRate = ref(95);
const weekCourses = ref(320);
const completedCourses = ref(186);
const pendingMessages = ref(12);
const urgentMessages = ref(3);

// 最近通知
const recentNotices = ref([
  {
    time: '2023-10-15 09:30',
    title: '关于下周家长会的通知',
    content: '请各班级班主任做好家长会准备工作，确保会议顺利进行'
  },
  {
    time: '2023-10-14 14:20',
    title: '秋季运动会安排',
    content: '10月20日举行秋季运动会，请各班级统计参赛人员'
  },
  {
    time: '2023-10-13 16:45',
    title: '教学资源更新通知',
    content: '新增三年级数学课件资源，请教师及时查看'
  }
]);
</script>

<style scoped>
/* 样式部分保持不变 */
.school-home {
  padding: 15px;
}

.school-info-card {
  margin-bottom: 20px;
  background-color: #e6f7ff;
}

.school-info {
  display: flex;
  align-items: center;
  padding: 20px;
}

.school-logo {
  margin-right: 20px;
}

.school-details h2 {
  margin-bottom: 15px;
  color: #1890ff;
}

.school-details p {
  margin: 8px 0;
  color: #333;
}

.school-details span {
  color: #666;
  font-weight: 500;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  
  height: 100%;
}

.stat-icon {
  font-size: 36px;
  color: #118AB2;
  margin-right: 15px;
  width: 60px;
  text-align: center;
}

.stat-title {
  color: #666;
  font-size: 14px;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 3px;
}

.stat-rate {
  font-size: 12px;
  color: #118AB2;
}

.notices-card {
  margin-top: 20px;
}

.el-timeline-item__timestamp {
  color: #666;
  font-size: 12px;
}
</style>